<template>
  <div>
    <div class="pa-3 pl-6 pr-6">
      <h3 class="mb-1">个人信息</h3>
      <div>
        <v-row class="pl-3 pr-3 mt-0 mb-0">
          <v-col v-for="item in baseInfo" :key="item.title" cols="4" class="pa-0 d-flex text-subtitle-2">
            <span style="width: 60px; display: inline-block; text-align: justify; text-align-last: justify;">
              {{ item.title }}
            </span>
            <span class="mr-1">:</span>
            <span>
              {{ item.value }}
            </span>
          </v-col>
        </v-row>
      </div>
    </div>
    <v-divider></v-divider>

    <div class="pa-6 pt-3 pb-2">
      <h3 class="mb-1">技能介绍</h3>
      <div>
        <!-- :class="i > 13 ? 'mr-2' : 'mr-2 mb-2'" -->
        <v-chip v-for="item in skillInfo" :key="item" class="mr-2 mb-2">
          {{ item }}
        </v-chip>
      </div>
    </div>
    <v-divider></v-divider>

    <div class="pa-6 pt-3 pb-3">
      <h3 class="mb-1">教育 & 培训</h3>
      <v-data-table hide-default-footer :headers="eduHeaders" :items="eduData" class="elevation-1"></v-data-table>
    </div>
    <v-divider></v-divider>

    <div class="pa-6 pt-3 pb-3">
      <h3 class="mb-1">就职公司</h3>
      <v-data-table
        hide-default-footer
        :headers="companyHeaders"
        :items="companyData"
        class="elevation-1"
      ></v-data-table>
    </div>
    <v-divider></v-divider>

    <div class="pa-6 pt-3 pb-3">
      <h3 class="mb-1">项目经历</h3>
      <v-card v-for="(item, i) in projectList" :key="i" :class="projectList.length - 1 === i ? '' : 'mb-3'">
        <v-subheader class="font-weight-black">{{ item.name }}</v-subheader>
        <div class="ml-4 mb-2 d-flex">
          <div style="min-width: 80px;">项目时间：</div>
          <div>{{ item.time }}</div>
        </div>
        <div class="ml-4 mb-2 d-flex">
          <div style="min-width: 80px;">项目简介：</div>
          <div>{{ item.info }}</div>
        </div>
        <div class="ml-4 mb-2 d-flex">
          <div style="min-width: 80px;">技术选型：</div>
          <div v-for="(skill, skillIndex) in item.skills" :key="skill">
            {{ item.skills.length - 1 === skillIndex ? skill : skill + '，' }}
          </div>
        </div>
        <div class="ml-4 mb-2 d-flex">
          <div style="min-width: 80px;">担任角色：</div>
          <div>{{ item.major }}</div>
        </div>
        <div class="ml-4 d-flex flex-column">
          <div style="min-width: 80px;">主要职责：</div>
          <div class="d-flex flex-column">
            <span v-for="(example, index) in item.duty" :key="index" class="ml-2 mb-1">
              {{ index + 1 }}.&nbsp;{{ example }}
            </span>
          </div>
        </div>
      </v-card>
    </div>
    <v-divider></v-divider>

    <div class="pa-6 pt-3 pb-3">
      <h3 class="mb-1">家庭情况</h3>
      <v-data-table hide-default-footer :headers="homeHeaders" :items="homeData" class="elevation-1"></v-data-table>
    </div>
  </div>
</template>

<script>
export default {
  // 登录页
  name: 'Login',

  data() {
    return {
      baseInfo: [
        { title: '姓    名', value: '施兵强' },
        { title: '年    龄', value: '26' },
        { title: '出生年月', value: '1996.02.17' },
        { title: '电    话', value: '13056868357' },
        { title: '邮    箱', value: '2010426591@qq.com' },
        { title: '籍    贯', value: '浙江 - 台州 - 三门' },
        { title: '现  住址', value: '鄞州区 - 邱隘 - 回龙' },
        { title: '应聘岗位', value: '前端开发工程师' }
      ],
      skillInfo: [
        'Vue全家桶',
        'Vue3',
        'UNI-APP',
        'React',
        'Styled-React-Component',
        'Element-UI',
        'Vuetify',
        'Tailwind',
        'Vant',
        'Eslint',
        'Sass',
        'Postcss',
        'TS',
        'Echarts',
        'BaiduMapJs',
        'Vite'
      ],
      eduHeaders: [
        { text: '时间', value: 'time' },
        { text: '学院 / 机构', value: 'school' },
        { text: '专业', value: 'major' }
      ],
      eduData: [
        { time: '2014.09 - 2018.07', school: '宁波工程学院', major: '汽车服务工程' },
        { time: '2018.11 - 2019.03', school: '达内', major: 'Java' }
      ],
      companyHeaders: [
        { text: '时间', value: 'time' },
        { text: '公司', value: 'school' },
        { text: '职位', value: 'major' }
      ],
      companyData: [
        { time: '2019.04 - 2020.06', school: '宁波恩通物流科技有限公司', major: '前端' },
        { time: '2020.08 - 2021.06', school: '浙江商数链科技有限公司', major: '前端' },
        { time: '2021.06 - 2021.10', school: '浙江云行者保险科技有限公司', major: '前端' },
        { time: '2021.10 - 2021.11', school: '鲸宝科技（浙江）有限公司', major: '前端' },
        { time: '2021.11 - 2022.02', school: '宁波概而论网络科技有限公司', major: '前端' }
      ],
      projectList: [
        {
          name: 'SSL AS商数链管理平台',
          time: '2020.09 - 2021.06',
          info: '为中小型企业提供订单，采购，生产，销售，仓库进销存，大屏展示，财务的erp软件',
          skills: ['Vue2.0全家桶', 'ElementUI', 'Echarts', 'axios', 'i18n'],
          major: 'Web主程',
          duty: [
            '封装全局页面组件',
            '封装ElementUI各类基础组件',
            '封装各类表格，行内表格，树表格等',
            '抽像多表导出，插槽，作用域插槽等',
            '配置角色鉴权，权限指令，数据映射，级联映射等',
            '功能工具类，数组功能工具类，封装请求等'
          ]
        },
        {
          name: '保险车辆管理平台',
          time: '2021.06 - 2021.10',
          info: '为保险企业过渡保监会审批要求项目',
          skills: ['Vue2.0全家桶', 'Vuetify', 'axios', 'i18n'],
          major: 'Web主程',
          duty: [
            '权限，抽象工具类，日期，数组，对象，指令',
            '封装各类表格，行内表格，树表格等',
            '适配移动端H5',
            '封装消息窗口、自定义组件缓冲、进度条、'
          ]
        },
        {
          name: '亲车吧推广',
          time: '2021.08 - 2021.09',
          info: '内部人员使用的推广录入系统',
          skills: ['Vue3', 'Vant', 'axios', 'echarts'],
          major: 'Web主程',
          duty: ['封装移动端touch指令，刷新，回退', '自定义的数据仓库']
        },
        {
          name: '概而论智能财务管理系统',
          time: '2021.11 - 2022.02',
          info: '为企业设计的专业的财务Erp',
          skills: ['Vue2', 'ElementUI', 'axios', 'echarts', 'Vue3'],
          major: '开发人员',
          duty: ['完成业务开发', 'iframe通信', 'Vue3单页']
        },
        {
          name: '概而论智能财务管理系统(小程序)',
          time: '2021.11 - 2022.02',
          info: '为企业设计的专业的财务Erp',
          skills: ['Uniapp'],
          major: '开发人员',
          duty: ['完成业务开发']
        },
        {
          name: 'react-jira-ts',
          time: '2022.3 - 至今',
          info: '学习React时的网络项目',
          skills: ['React', 'TS', 'emotion'],
          major: '开发者',
          duty: ['Context分发', 'Hook', 'styled-component']
        },
        {
          name: 'vue3-ts-vite',
          time: '2021.10 - 至今',
          info: '完成个人的原生UI组件库',
          skills: ['Vue3', 'Vite', 'Postcss', 'tailwind', 'ts', 'jest'],
          major: 'Web主程',
          duty: ['按钮、Tooltip、Dropdown、Select、Input', 'render渲染']
        }
      ],
      homeHeaders: [
        { text: '姓名', value: 'name' },
        { text: '称呼', value: 'nickname' },
        { text: '年龄', value: 'age' },
        { text: '电话', value: 'phone' }
      ],
      homeData: [
        { name: '施先金', nickname: '父亲', age: '58', phone: '18868698561' },
        { name: '施美娇', nickname: '姐姐', age: '32', phone: '15858415900' }
      ]
    }
  }
}
</script>

<style lang="scss" scoped></style>
